<template>
  <div class="content">
    <el-tabs
      type="border-card"
      style="margin: 0 20px; height: 92vh"
      @tab-click="handleClick"
      v-model="$store.state.activeName8"
    >
      <el-tab-pane label="单点分析" name="单点分析">
        <el-form inline :model="form">
          <el-form-item label="开始时间">
            <el-date-picker
              type="datetime"
              placeholder="选择开始时间"
              size="mini"
              v-model="form.startTime"
              default-time="00:00:00"
              :picker-options="startTimePicker"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              type="datetime"
              placeholder="选择结束时间"
              size="mini"
              v-model="form.endTime"
              default-time="00:00:00"
              :picker-options="endTimePicker"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="info" size="mini" @click="getPressureChart"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <div
          id="pressure"
          style="height: 74vh"
          v-loading="loadingEcharts"
        ></div>
      </el-tab-pane>
    </el-tabs>
    <p class="pStyle">南京中网卫星通信股份有限公司</p>
  </div>
</template>
<script>
import Axios from "axios";
import moment from "moment";
import echarts from "echarts";
import * as serviceApi from "../../../../common/service.config";
Axios.defaults.withcredentials = true;
export default {
  props: {
    node: Object,
  },
  data() {
    return {
      form: {
        startTime: moment().subtract(1, "months").format("YYYY-MM-DD 00:00:00"),
        // startTime: "2016-07-06",
        endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      },
      pageData: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      activeName8: "单点分析",
      pressureChart: null,
      //   waterLevelChart: null,
      loadingEcharts: true,
    };
  },
  computed: {
    startTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.startTime
            ? time.getTime() > new Date(this.form.endTime).getTime()
            : false,
      };
    },
    endTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.endTime
            ? time.getTime() > new Date().getTime() ||
              time.getTime() < new Date(this.form.startTime).getTime()
            : false,
      };
    },
  },
  mounted() {
    this.pressureChart = this.$echarts.init(
      document.getElementById("pressure")
    );
    this.getPressureChart();
  },
  methods: {
    handleClick(tab) {
      this.$store.dispatch("getTabName2", tab.paneName);
    },
    getPressureChart() {
      this.loadingEcharts = true;
      let queryData = {
        startTime: moment(this.form.startTime).format("YYYY-MM-DD HH:mm:ss"),
        endTime: moment(this.form.endTime).format("YYYY-MM-DD HH:mm:ss"),
        tunnel: this.form.tunnel,
      };
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"tunnelNumber\\":\\"\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\"}","serviceCode":"queryRockDataByDate","timestamp":"","uuid":""}`,
      }).then((res) => {
        let list = res.data.parameter.list;
        this.pressureChart.hideLoading();
        let collectDate = [];
        let waterPressure = [];
        let nozzleHeight = [];
        let levelData = [];
        let lowerData = [];
        let temperature = [];
        let firstLevel = [];
        let secondLevel = [];
        let thirdLevel = [];
        let forthLevel = [];
        for (let i = 0; i < list.length; i++) {
          var obj1 = new Object();
          obj1.value = Number(list[i].waterPressure).toFixed(3);
          waterPressure[i] = obj1;

          var obj2 = new Object();
          obj2.value = moment(list[i].collectDate).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          collectDate[i] = obj2;
          var obj3 = new Object();
          obj3.value = Number(list[i].nozzleHeight).toFixed(3);
          nozzleHeight[i] = obj3;
          var obj4 = new Object();
          if (!list[i].levelData) {
            let levelData = null;
            list[i].levelData = levelData;
          }
          obj4.value = Number(list[i].levelData).toFixed(3);
          levelData[i] = obj4;
          var obj5 = new Object();
          if (!list[i].lowerData) {
            let lowerData = null;
            list[i].lowerData = lowerData;
          }
          obj5.value = Number(list[i].lowerData).toFixed(3);
          lowerData[i] = obj5;
          var obj6 = new Object();
          if (!list[i].temperature) {
            let temperature = null;
            list[i].temperature = temperature;
          }
          obj6.value = Number(list[i].temperature).toFixed(1);
          temperature[i] = obj6;
          if (res.data.parameter.firstLevel ) {
            var obj7 = new Object();
            obj7.value = Number(res.data.parameter.firstLevel).toFixed(1);
            firstLevel[i] = obj7;
          }
          if (res.data.parameter.secondLevel ) {
            var obj8 = new Object();
            obj8.value = Number(res.data.parameter.secondLevel).toFixed(1);
            secondLevel[i] = obj8;
          }
          if (res.data.parameter.thirdLevel ) {
            var obj9 = new Object();
            obj9.value = Number(res.data.parameter.thirdLevel).toFixed(1);
            thirdLevel[i] = obj9;
          }
          if (res.data.parameter.forthLevel ) {
            var obj11= new Object();
            obj11.value = Number(res.data.parameter.forthLevel).toFixed(1);
            forthLevel[i] = obj11;
          }
          var obj10= new Object();
          if (!list[i].temperature) {
            let temperature = null;
            list[i].temperature = temperature;
          }
          obj10.value = Number(list[i].temperature).toFixed(1);
          temperature[i] = obj10;
        }
        // 反转时间数组
        // var newCreatTime = [];
        // for (var i = creatTime.length - 1; i >= 0; i--) {
        //   newCreatTime[newCreatTime.length] = creatTime[i];
        // }
        let chartOption = {
          color: [
            "transparent",
            "#0000CC",
            "#880000",
            "#EEEE00",
            "#FF0000",
            "#FF7744",
            "#FFCC22",
            "#5599FF",
          ],
          title: [
            {
              left: "center",
              text: "压强",
            },
            {
              top: "48%",
              left: "center",
              text: "水位高程",
            },
          ],
          tooltip: {
            trigger: "axis",
            formatter(params) {
              if (params[0].axisIndex == 0) {
                let tip = params[0].name + "<br/>";
                for (let y = 0; y < params.length; y++) {
                  tip +=
                    params[y].marker +
                    params[y].seriesName +
                    "：" +
                    params[y].value +
                    "kPa<br/>";
                }
                return tip;
              } else if (params[0].axisIndex == 1) {
                let str = params[0].name + "<br/>";
                for (let y = 0; y < params.length; y++) {
                  str +=
                    params[y].marker +
                    params[y].seriesName +
                    "：" +
                    params[y].value +
                    "<br/>";
                }
                return str;
              }
            },
          },
          legend: {
            top: 380,
            data: [
              "水位高程(m)",
              "上游水位(m)",
              "下游水位(m)",
              "一级预警(m)",
              "二级预警(m)",
              "三级预警(m)",
              "四级预警(m)",
            ],
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          grid: [
            {
              bottom: "60%",
            },
            {
              top: "60%",
            },
          ],
          xAxis: [
            {
              data: collectDate,
            },
            {
              data: collectDate,
              gridIndex: 1,
            },
          ],
          yAxis: [
            {
              name: "压强(kPa)",
            },
            {
              name: "水位高程(m)",
              gridIndex: 1,
            },
            {
              name: "温度(°C)",
              gridIndex: 1,
            },
          ],
          dataZoom: [
            {
              type: "slider",
              show: true,
              start: 0,
              end: 100,
              height: 20,
              bottom: "1",
              left: "9%",
            },
            //下面这个属性是里面拖到
            {
              type: "inside",
              show: true,
              xAxisIndex: [0, 1],
              start: 0, //默认为1
              end: 100, //默认为100
              moveOnMouseWheel: false,
              preventDefaultMouseMove: false,
              showDataShadow: false, //是否显示数据阴影 默认auto
              showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
              realtime: true, //是否实时更新
            },
          ],
          series: [
            {
              name: "压强",
              type: "bar",
              showSymbol: false,
              data: waterPressure,
              itemStyle: {
                color: "#FFBB00",
              },
              barMaxWidth: "20%",
            },
             {
              name: "温度(°C)",
              type: "line",
              showSymbol: false,
              data: temperature,
              xAxisIndex: 1,
              yAxisIndex: 1,
              lineStyle: {
                color: "transparent",
              },
            },
            {
              name: "水位高程(m)",
              type: "line",
              showSymbol: false,
              data: nozzleHeight,
              xAxisIndex: 1,
              yAxisIndex: 1,
              lineStyle: {
                color: "#0066FF",
              },
            },
            {
              name: "上游水位(m)",
              type: "line",
              showSymbol: false,
              data: levelData,
              xAxisIndex: 1,
              yAxisIndex: 1,
              lineStyle: {
                color: "#880000",
              },
            },
            {
              name: "下游水位(m)",
              type: "line",
              showSymbol: false,
              data: lowerData,
              xAxisIndex: 1,
              yAxisIndex: 1,
              lineStyle: {
                color: "#EEEE00",
              },
            },
           
            {
              name: "一级预警(m)",
              type: "line",
              showSymbol: false,
              data: firstLevel,
              xAxisIndex: 1,
              yAxisIndex: 1,
              lineStyle: {
                color: "#FF0000",
              },
            },
            {
              name: "二级预警(m)",
              type: "line",
              showSymbol: false,
              data: secondLevel,
              xAxisIndex: 1,
              yAxisIndex: 1,
              lineStyle: {
                color: "#FF7744",
              },
            },
            {
              name: "三级预警(m)",
              type: "line",
              showSymbol: false,
              data: thirdLevel,
              xAxisIndex: 1,
              yAxisIndex: 1,
              lineStyle: {
                color: "#FFCC22",
              },
            },
            {
              name: "四级预警(m)",
              type: "line",
              showSymbol: false,
              data: forthLevel,
              xAxisIndex: 1,
              yAxisIndex: 1,
              lineStyle: {
                color: "#5599FF",
              },
            },
          ],
        };
        this.pressureChart.setOption(chartOption);
        this.loadingEcharts = false;
      });
    },
  },
};
</script>
<style scoped>
.content {
  position: relative;
}
.pStyle {
  position: absolute;
  right: 2%;
  bottom: 1%;
}
</style>